<template>
  <div class="contentPhone">
    <uv-text text="获取验证码" @click="onClick" v-if="isText" :color="color"></uv-text>
    <view v-else class="flex alignCenter">
      <uv-count-down :time="60 * 1000" format="ss" @finish="end"></uv-count-down>s
    </view>
  </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
let props = defineProps(["modelValue", "mobile", "color"]);
const emit = defineEmits(["update:modelValue"]);
let isText = ref(true);
let end = () => {
  isText.value = true;
};

let color = computed(() => {
  return props.color ? props.color : "#3c9cff";
});

let onClick = async () => {
  if (!props.mobile) return proxy.$utils.showToast("请输入手机号");
  if (!proxy.$utils.isPoneAvailable(props.mobile))
    return proxy.$utils.showToast("请输入正确手机号");
  let code = await proxy.$apis.sendSms({ mobile: props.mobile });
  emit("update:modelValue", code);
  isText.value = !isText.value;
};
</script>

<style lang="scss" scoped>
</style>
